<template>
<div class="container-page">
    <div class="page-left">
        <input type="checkbox" v-model="AllChecked" @change="checkAll">全选
    </div>

    <div class="page-right">
        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[20, 40, 60,80, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
</div>
  
</template>

<script>
import eventBus from '../../../untial/evevtBus';
export default {
    props:['total','page','pageSize','pageSizes'],
    mounted() {
      eventBus.$on('deleteAllTable',this.deleteAllTable)
    },
      methods: {
        deleteAllTable(){
            this.AllChecked = false
        },
        checkAll(){
          eventBus.$emit('checkAllFun',this.AllChecked)
          // console.log(this.AllChecked);

        },
        // 控制每页显示多少条
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.$emit('changePageSize',val)
        this.AllChecked = false
        eventBus.$emit('empty')
      },
      //控制当前页码
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);     
          this.$emit('changePage',val)
          this.AllChecked = false
          eventBus.$emit('empty')
      }
    },
    data() {
      return {
        currentPage4: 1,//当前显示第几页
        AllChecked:false

      };
    }
}
</script>

<style lang="less" scoped>
.container-page{
    display: flex;
    overflow:hidden;
    background: rgba(255,255,255,0.4);
    .page-left{
        padding-left: 34px;
        margin:14px 0px 42px 0;
        color: #333333;
        font-size: 14px;
        font-weight: bold;
        input{
            margin-right: 10px;
        }
        span{
            font-size: 12px;
            font-weight: regular;
            color:#333333;
            margin-left: 10px;
        }
    }
    .page-right{
        padding: 22px 0 24px 0px;
        margin: 0  auto;
        
        /deep/.el-pager li{
            border-radius: 5px;
            padding: 0;
            width: 24px;
            height: 24px;
            line-height: 24px;
            margin-right: 10px;
            min-width: 0;
        }
        /deep/.el-pager li.active{
            background: #438afe;
            color: #fff;
        }
        /deep/.btn-prev{
            width: 24px;
            height: 24px;
            padding: 0;
            margin-right: 10px;
            border: 1px solid #eef1f5;
        }
        /deep/.number{
            width: 24px;
            height: 24px;
            border: 1px solid #eef1f5;
        }
        /deep/.btn-next{
            width: 24px;
            height: 24px;
            padding: 0;
            border: 1px solid #eef1f5;
        }
     /deep/.el-pagination__editor{
        .el-input__inner{
           width: 48px; 
           height: 24px;
        }
            
        }
    }
}
</style>